<template>
  <div class="commentcontainer">
    <div class="commentleft">
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        @click="gotouserinfo()"
      />
      <!-- 用户头像,点击跳转至个人空间 -->
      <el-rol><span>id120</span></el-rol>
    </div>
    <div class="commentright">
      <div>
        <h1>用户名{{ ":" }}</h1>
        <!--用户名-->
        <p>{{ "@" }}id120</p>
        <p>这是评论内容</p>
        <!--评论内容-->
      </div>

      <p>2023/7/16</p>
      <!--时间-->
    </div>
  </div>
  <!--container -->
</template>

<script>
export default {
  name: "the_comment",
  data() {
    return {};
  },
  methods: {},
  props: ["commentinfo"],
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.commentcontainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 1%;
  padding: 1%; /* 上下左右边距 */
  border: green solid 1px; /* 边框 */
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.commentcontainer > .commentleft {
  display: flex;
  margin-left: 2px;
  font-size: 15px;
}
.commentcontainer > .commentright {
  margin-left: 3px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.commentcontainer > .commentright > div {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.commentcontainer > .commentright > div > h1 {
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 15px;
  opacity: 0.9;
}
.commentcontainer > .commentright > div > p {
  padding: 0;
  margin: 0;
  font-size: 10px;
  line-height: 10px;
  opacity: 0.8;
  margin-left: 5px;
}
.commentcontainer > .commentright > p {
  padding: 0;
  margin: 0;
  font-size: 10px;
  opacity: 0.8;
  margin-top: 10px;
}
</style>
